import React,{useState} from 'react'
import { useNavigate,useParams,useLocation} from 'react-router-dom'
import * as api from '../api/index'
import { ProductCard, Tag, Button,NavBar,ActionBar  } from 'react-vant';
import {useDispatch,useSelector} from 'react-redux'
import { CartO, Star } from '@react-vant/icons';
function Detail() {
  const params=useParams();
  const location=useLocation();
  const navigate=useNavigate()
  const dispatch=useDispatch();
   const childrenList=useSelector(state=>{
     return state.reducer.sonList.filter(item =>item.id === params.id)
   })
   console.log(childrenList)
  
  console.log("params",params)
  console.log('location',location)
   //加入购物车
  const addShop=(ids)=>{
    dispatch(api.addShop(ids))
  }

  return (
    <div>
       <NavBar title={childrenList[0].title} onClickLeft={()=> navigate(-1)} />
        <ProductCard
      num={childrenList[0].count}
      price={childrenList[0].price}
      desc={childrenList[0].content}
      title={childrenList[0].title}
      thumb={childrenList[0].img}
    />
      <div className='demo-action-bar'>
    <ActionBar>
      <ActionBar.Icon icon={<Star  color={childrenList[0].liked ? "red":'#594949'} onClick={()=>{ dispatch(api.Like(params.id))  }}/>} text="收藏" />
      <ActionBar.Icon icon={<CartO color="red" />} text="购物车" />
      <ActionBar.Button color="red" type="warning" text="加入购物车" onClick={()=>{
        addShop(params.id)
      }}/>
    </ActionBar>
    </div>
    </div>
  )
}

export default Detail